Pofily – WooCommerce Product Filters

Pofily helps you add filters to products. With various options of Filters the plugin provides, customers can search for their in-need products with just a few manipulations. Users can design how to show filters on the frontend with Customize settings, choose place to display filter by using shortcode or adding rules, make the Filter look friendly and convenient to use for customers.

THE PLUGIN FEATURES:

Show Filter in Modal

1. Choose to show Filter in Modal window with Off-canvas style or Top product loop style

2. Edit icon to show Modal window with Icon position and Modal icon style

3. Edit Modal with position to appear, effect, column layout

4. Choose a style: Theme style or Custom style

5. Design filter area with color of Title, Background and Accent color

6. Set default color for Color swatches type (Taxonomy)

7. Design label with default, hovered, and active status: font size, border width, border radius, background color, text color

Create filters that help customers search for products conveniently.

1. Create multiple filter blocks for particular searching purposes with different options: Taxonomy, Price, Review, OnSale/Instock, Name, Metabox.

2. Choose Taxonomy to apply the filter: Categories, Product tags, Attribute (Color, Size,…), …

3. Show Filter as checkboxes, buttons, color swatches, images, range, range slider, search field (with Name)

4. Customize terms or values with labels to replace the original name, and tooltip when hovered mouse…

5. Customize range with Min and Max value. Create as many ranges as you want with Range type. Choose range

6. Enable, disable to show the number of items, “clear” button, “view more” button, or toggle, and allow customers to choose multiple selections.

7. Select Order by Name, Slug, or ID and choose Order type between ASC or DESC (for Taxonomy)

8. Edit display type – Vertical or Horizontal – for Button type

9. With Filter By Metabox, we provide meta keys of Products available in the database. Manage at settings and the plugin will display corresponding meta value

Customize and arrange the menu display on the front end.

1. Choose and add blocks you want the menu to display on your website with created blocks

2. Set rules to display Filter Menu at Display Conditions

3. Enable, disable to show “Apply Filter” button

4. Enable, disable to show menu in a modal window

Show Filter Menu using provided shortcode: We provided a shortcode to display Filter Menu, you can use it to display on a position you need just by copying and pasting to your ideal place.

System required:

Download plugin:

Go to Plugin/Add New/Upload Plugin/Choose file/

Select plugin zip file pofily-woocommerce-product-filters.zip

Install now –> Activate plugin

Video guide install and use

After installing and activating {plugin_name}, you can:

1. Add and edit filter blocks with various options to customize at Filter Blocks.

2. Add and edit filters menu with new-made or available filter blocks you created and customize how it displays on the frontend at Filter Menu.

3. Manage other customization at  Settings.

FILTER BLOCKS

Go to Pofily –> Filter Blocks –> Add Filter Blocks

Now you can start creating new Filter Blocks

1. Add title: Enter title of the block. This title will show on the backend in Filter Blocks
2. Filter name: This field is compulsory. The name you add will appear on frontend.
3. Filter For: Choose the type of filter that will apply to products among 6 options: Taxonomy, Price, Review, OnSale/InStock, Name, or Metabox.

Filter By Taxonomy

1. Choose taxonomy: Choose one option of taxonomy.

2. Choose term: You can add term of category or tag based on your selection above manually. Or use Add all Button to add all available terms.

3. Show type: Type to display taxonomy filter. There are 6 options: Button, Checkbox, Select, Color Swatches, Images.

 

BUTTON TYPE

When you choose this type, Taxonomy will display as buttons.

1. Customize term:

   • Name: After you add a term, name of the term will appear in this column.

   • New Label: Add label for term. This field is optional and will appear on frontend when you show Filter. If this field is empty, it will take the Name to display

   •  Tooltip: Add tooltip. This field is optional. It will appear on the frontend when user hovers mouse over the term.
2. Order by: Name, ID or Slug
3. Order type: ASC or DESC
4. Show count of items: Enable to show the number of items
5. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
6. Multiselect relation: If you enable “Allow mutilple selection”, choose a relation “And” or “Or”
7. Display type: Choose the display type for your filter block – Vertical or Horizontal
8. Show “clear” button: Enable to show the “Clear” link above the filter block
9. Show as toggle: Enable if you want to show this filter as a toggle
10. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

CHECKBOX TYPE

When you choose this type, Taxonomy will display as checkboxes.

1. Customize term:

   • Name: After you add a term, name of the term will appear in this column.

   • New Label: Add a label for term. This field is optional and will appear on frontend when you show Filter. If this field is empty, it will take the Name to display

   •  Tooltip: Add tooltip. This field is optional. It will appear on the frontend when user hovers mouse over the term.
2. Order by: Name, ID or Slug
3. Order type: ASC or DESC
4. Show count of items: Enable to show the number of items
5. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
6. Multiselect relation: If you enable “Allow mutilple selection”, choose a relation “And” or “Or”
7. Show “clear” button: Enable to show the “Clear” link above the filter block
8. Show as toggle: Enable if you want to show this filter as a toggle

 

 

SELECT TYPE

When you choose this type, Taxonomy will show up as selections.

1. Customize term:

   • Name: After you add a term, name of t the term will appear in this column.

   • New Label: Add label for the term. This field is optional and will appear on the frontend when you show Filter. If this field is empty, it will take the Name to display

   •  Tooltip: Add tooltip. This field is optional. It will appear on the frontend when user hovers mouse over the term.
2. Show search field: Enable to show search field.
3. Order by: Name, ID, or Slug
4. Order type: ASC or DESC
5. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
6. Multiselect relation: If you enable “Allow mutilple selection”, choose a relation “And” or “Or”
7. Show “clear” button: Enable to show the “Clear” link above the filter block
8. Show as toggle: Enable if you want to show this filter as a toggle, and choose toggle style.

 

 

COLOR SWATCHES TYPE

When you choose this type, taxonomy will show up as colored buttons.

1. Button template:  Customize button by changing value in Width, Height, and Border-radius columns.
2. Color separator: When you add more than one color variant for one term (maximum 3), choose separator to seperate the colors.
3. Customize term:

   • Name: After you add a term, name of the term will appear in this column.

   • New Label: Add label for the term. This field is optional and will appear on the frontend when you show Filter. If this field is empty, it will take the Name to display

   •  Tooltip: Add tooltip. This field is optional. It will appear on the frontend when user hovers mouse over the term.
4. Order by: Name, ID, or Slug
5. Order type: ASC or DESC
6. Show count of items: Enable to show the number of items
7. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
8. Multiselect relation: If you enable “Allow mutilple selection”, choose a relation “And” or “Or”
9. Display type: Choose the display type for your filter block – Vertical or Horizontal
10. Show “clear” button: Enable to show the “Clear” link above the filter block
11. Show as toggle: Enable if you want to show this filter as a toggle
12. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

IMAGES TYPE

When you choose this type, Taxonomy will display as images.

1. Button template:  Customize image display by changing value in Width, Height, and Border-radius columns.
2. Customize term:

   • Name: After you add a term, name of the term will appear in this column.

   • New Label: Add label for the term. This field is optional and will appear on the frontend when you show Filter. If this field is empty, it will take the Name to display

   •  Tooltip: Add tooltip. This field is optional. It will appear on the frontend when user hovers mouse over the term.
3. Order by: Name, ID, or Slug
4. Order type: ASC or DESC
5. Allow multiple selection: Enable this if you want to allow customer to choose more than 1 option
6. Multiselect relation: If you enable “Allow mutilple selection”, choose a relation “And” or “Or”
7. Display type: Choose the display type for your filter block – Vertical or Horizontal
8. Show “clear” button: Enable to show the “Clear” link above the filter block
9. Show as toggle: Enable if you want to show this filter as a toggle, then choose toggle style
10. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

Filter By Price

When you choose this Filter, customers can search for products with prices that match their needs.

There are 2 types of Filter: Price Range Slider and Price Range

 

PRICE RANGE SLIDER

Create a range slider that allows customers to search for products with ideal prices flexibly.

1. Price range slider value: Create a range slider by adding values of price to Min and Max fields. If these fields are blank, the range will be automatically created by value on the Product page
2. Show “clear” button: Enable to show the “Clear” link above the filter block
3. Show as toggle: Enable if you want to show this filter as a toggle

 

 

PRICE RANGE

Create a stable range manually where customers can find their ideal price by selecting available options.

There are 2 options to display range on frontend: Button and Select

1. Customize price ranges: Add as many ranges as you want by entering Min and Max value –> Choose “Add range”
2. Show count of items: Enable to show the number of items
3. Display Type: Choose the display type for your filter block – Vertical or Horizontal (only works with Button)
4. Show “clear” button: Enable to show the “Clear” link above the filter block
5. Show as toggle: Enable if you want to show this filter as a toggle
6. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

Filter By Review

This Filter helps customers find products using ratings and reviews.

There are 2 types to display Filter By Review: Button and Select

1. Show star icon: Enable to show star icon (Only works with Button)
2. Show count of items: Enable to show the number of items
3. Display Type: Choose the display type for your filter block – Vertical or Horizontal (Only works with Button)
4. Show “clear” button: Enable to show the “Clear” link above the filter block
5. Show as toggle: Enable if you want to show this filter as a toggle, then choose toggle style
6. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

Filter By OnSale/InStock

This Filter helps customers find products on sale/in stock.

1. Choose to display Filter for Onsale product or Instock product, enable both if you want to add the filter for all.
2. Choose Filter Type: Button or Checkbox

1. Show count of items: Enable to show the number of items
2. Display Type: Choose the display type for your filter block – Vertical or Horizontal (Only works with Button)
3. Show “clear” button: Enable to show the “Clear” link above the filter block
4. Show as toggle: Enable if you want to show this filter as a toggle, then choose toggle style
5. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

Filter By Name

This filter helps customers find their product by entering product name into the search field

1. Placeholder text: Enter the placeholder for search field, it will be displayed on frontend
2. Show “clear” button: Enable to show the “Clear” link above the filter block
3. Show as toggle: Enable if you want to show this filter as a toggle, then choose a toggle style

Filter By Metabox

This Filter helps customers find products they want by using meta key and meta value in metadata.

1. Choose meta key: To choose meta key, you need to manage at Setting > Metadata to add the meta_key you want to display
2. Choose meta type:  Choose your meta type – String or Numeric

 

STRING TYPE

There are 3 types to display this Filter with String type on the frontend: Button, Checkbox, and Select

 

1. Search/Add Meta Value: Type to add Meta value manually, or use the “Add all” button to add all available meta values
2. Customize meta value: 

   • Name: After you add a value, the original value will appear in this column.

   • New Label: Add label for the value. This field is optional and will appear on the frontend when you show Filter. If this field is empty, it will take the Name to display

   •  Tooltip: Add tooltip. This field is optional. It will appear on the frontend when the user hovers the mouse over the meta value
3. Show count of items: Enable to show the number of items
4. Allow multiple selection: Enable this if you want to allow customers to choose more than 1 option
5. Multiselect relation: If you enable “Allow multiple selection”, choose a relation “And” or “Or”
6. Display type: Choose the display type for your filter block – Vertical or Horizontal (Only works with Button)
7. Show “clear” button: Enable to show the “Clear” link above the filter block
8. Show as toggle: Enable if you want to show this filter as a toggle, then choose toggle style.
9. Show “view more” button: Show view more item (Only works if show type is button or checkbox).

 

 

 

NUMERIC TYPE

There are 2 options to show Filter with Numeric type

 

Range

1. Customize ranges: Choose “Add range”, then fill values into Min and Max fields. You can add as many ranges as you want
2. Display type: Choose the display type for your filter block – Vertical or Horizontal
3. Show “clear” button: Enable to show the “Clear” link above the filter block
4. Show as toggle: Enable if you want to show this filter as a toggle
5. Show “view more” button: Show view more item (Only works if show type is button or checkbox)

 

 

 

Range Slider

1. Ranger slider value: Fill values into Min and Max fields. Choose slider step.
2. Show “clear” button: Enable to show the “Clear” link above the filter block
3. Show as toggle: Enable if you want to show this filter as a toggle, then choose a toggle style

FILTER MENUS

Create Filter Menus to display Filter Blocks on the frontend.

Go to Dashboard –> Pofily –> Filter Menus –> Add Filter Menus

Then start to create a Filter Menu

1. Add title: Enter a title for Filter Menu, this field will not show on the frontend
2. Choose Filter Block: Filter Blocks you created will appear in the left field. Click to the Block to add it to the menu. The Block you choose will appear in the right field. You can drag the Blocks to change their position appearing on the frontend.
3. Using button to filter: Enable to show a button “Apply Filter” to apply all filters
4. Show menu in modal: Enable to show the menu filter in content modal
5. Display Conditions: Add rule display conditions you want. For example: Menu is only applied to the product category or Shop page…

MANAGE SETTING AND DESIGN

Manage general settings and design how the Filter Menu appears on the frontend as you want at Pofily –> Settings.

 

GENERAL

1. Filter Modal: Enable this option to show filter in modal window
2. Modal auto open: Enable this option to open Filter modal automatically
3. Show active filters: Enable this option to show active filters as labels

 

 

CUSTOMIZE

1. Modal style: Choose to show Filter Menu in Modal in Off canvas style or Top product loop style
2. Icon position: Choose a position to show Icon on the frontend
3. Off-canvas Position: Choose a position to show modal in Off canvas style
4. Off-canvas effect open: Choose an effect to show modal in Off canvas style
5. Modal icon style: Design icon with Default version and when hovered
6. Options style: Choose a style between Theme style or Custom Style
7. Filters area colors: Customize color for Title, Background, and Accent of Filter modal
8. Color swatches/Image button default size: Set default design for Color swatches and Image button with Width, Height, Border radius value, and Color separator (for color swatches if you add more than 1 color variant to one term)
9. Color swatches default color: Set default color for Color swatches button
10. Label styles: Set default design, Hovered design, and Active design for Label.

NOTE:  The (1), (2), (3), (4), (5) will be unavailable if the Settings –> General –> Filter Modal feature is disabled

.

 

METADATA

In the Metadata setting, we provide meta keys for Products available in your database, choose as many meta keys you want to display. The meta key you chose will display on Filter By Metabox –> Choose meta key field. You need to manage the setting in this section before choosing the meta key when creating Filter By Metabox.

Thank you for your attention!

If you have any questions, please create a topic at our FORUM, we will support within 24 hours.